<template>
	<div class="tabs_container">
		<up-tabs lineColor="#f58d17" :current="current" :list="list1" @click="click"></up-tabs>
	</div>

	<swiper :style="{height:heightPx+'rpx'}" circular @change="handlerChange" :current="current" class="swiper">
		<swiper-item  class="item_swiper" v-for="item in list1" :key="item">
			<view v-if="isLoading">
				<view v-if="RegisterInfoList.length == 0">
					<up-empty mode="list">
					</up-empty>
				</view>
				<div class="container" v-else>
					<div class="card" @click="goDetails(item)" v-for="(item,index) in RegisterInfoList" :key="index">
						<!-- 时间表调 -->
						<div class="titleDate">
							{{DateConversion(item.reservation.appointmentDate)}} ---
							{{item.reservation.appointmentTime == 'afternoon'?'下午':'上午'}}
						</div>
						<!-- 预约信息 -->
						<div class="info">
							<div class="list">
								<div class="item">
									<span>预约医生：</span>
									<span>{{item.employee.name}}</span>
								</div>
								<div class="item">
									<span>预约医生手机号：</span>
									<span>{{item.employee.phone}}</span>
								</div>
								<div class="item">
									<span>预约状态：</span>
									<span v-if="item.reservation.status == '1'" class="pre-book already">已预约</span>
									<span v-else-if="item.reservation.status == '4'" class="pre-book visit">待支付</span>
									<span v-else-if="item.reservation.status == '3'" class="pre-book expire">已过期</span>
									<span v-else-if="item.reservation.status == '5'" class="pre-book error">支付失败</span>

									<span v-else class="pre-book over">就诊完成</span>
								</div>
							</div>
							<div class="avatar">
								<image :src="item.employee.avatar" mode=""></image>
							</div>
						</div>
					</div>
					<up-loadmore v-if="isGlide" :status="glideStatus" />
				</div>

			</view>
			<view v-else>
				<up-loadmore status="loading" />
			</view>

		</swiper-item>
	</swiper>



</template>

<script setup>
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		apiGetList
	} from "@/api/reservation.js"
	import {
		ref,
		reactive
	} from 'vue';

	const current = ref(0)

	//下滑状态
	const isGlide = ref(true)
	const glideStatus = ref("loading")

	const queryData = ref({
		page: 1,
		pageSize: 10,
		status: null
	})

	const isLoading = ref(false)

	//改变的高度
	const heightPx = ref(0)

	// 创建响应式数据  
	const list1 = reactive([{
			name: '全部'
		},
		{
			name: '已预约'
		},
		{
			name: '已过期'
		},
		{
			name: '待支付'
		},
		{
			name: '支付失败'
		},
		{
			name: '就诊完成'
		}
	]);

	// 定义方法  
	function click(item) {
		isLoading.value = false
		current.value = item.index
		queryData.value.page = 1
		queryData.value.pageSize = 10
		queryData.value.status = isJudgeStatus()
		getPageList()
		console.log('item', item);
	}

	const handlerChange = (event) => {
		isLoading.value = false
		current.value = event.detail.current
		queryData.value.page = 1
		queryData.value.pageSize = 10
		queryData.value.status = isJudgeStatus()
		getPageList()

	}

	//预约列表
	const RegisterInfoList = ref([])

	//预约时间转换
	const DateConversion = (date) => {
		return date.split('T')[0]
	}

	//头像转换
	const avatarConversion = (avatar) => {
		let strAll = avatar.split("/")
		return "/static/user_avatar/" + strAll[strAll.length - 1]

	}

	//获取分页列表
	const getPageList = async () => {
		isLoading.value = false
		//根据用户id获取预约列表
		let res = await apiGetList({
			empId: userId.value,
			type: "2",
			status: queryData.value.status,
			page: queryData.value.page,
			pageSize: queryData.value.pageSize
		})

		RegisterInfoList.value = res.data.records
		heightPx.value = 0
		if (RegisterInfoList.value.length > 0) {
			RegisterInfoList.value.forEach(ele => {
				heightPx.value += 360
				ele.employee.avatar = avatarConversion(ele.employee.avatar)
			})


		} else {
			heightPx.value = 1000
		}

		setTimeout(() => {
			isLoading.value = true
		}, 1000)


		console.log(RegisterInfoList.value)
	}

	const userId = ref(null)
	onLoad(async (option) => {
		userId.value = option.userId
		getPageList()
	})
	onPullDownRefresh(() => {
		// 在这里重新获取第一页的数据
		queryData.value.page = 1
		queryData.value.pageSize = 10
		queryData.value.status = isJudgeStatus()
		getPageList()

		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	// 判断当前滑块所在页面是什么
	const isJudgeStatus = () => {
		switch (current.value) {
			case 0:
				return null;
			case 1:
				return "1";
			case 2:
				return "3";
			case 3:
				return "4";
			case 4:
				return "5";
			case 5:
				return "6";
		}
	}


	//下拉
	onReachBottom(async () => {
		glideStatus.value = 'loading'
		isGlide.value = true
		// 下滑获取数据
		queryData.value.page++;
		queryData.value.status = isJudgeStatus()

		//根据用户id获取预约列表
		let res = await apiGetList({
			empId: userId.value,
			type: "2",
			status: queryData.value.status,
			page: queryData.value.page,
			pageSize: queryData.value.pageSize
		})
		if (res.data.records.length > 0) {
			RegisterInfoList.value = [...RegisterInfoList.value, ...res.data.records]
			res.data.records.forEach(ele => {
				heightPx.value += 360
			})
			RegisterInfoList.value.forEach(ele => {
				ele.employee.avatar = avatarConversion(ele.employee.avatar)
			})

		} else {
			heightPx.value = 0
			RegisterInfoList.value.forEach(ele => {
				heightPx.value += 360
				ele.employee.avatar = avatarConversion(ele.employee.avatar)
			})
			setTimeout(() => {
				queryData.value.page--;
				glideStatus.value = 'nomore'
			}, 1000)
		}
	})
	
	onShow(()=>{
		getPageList()
	})

	// 去往详情页面
	const goDetails = (item) => {

		uni.navigateTo({
			url: `/pages/my/details/details?empId=${item.employee.empId}&rId=${item.reservation.reservationId}`
		})
	}
</script>

<style scoped lang="scss">
	
	.tabs_container {
		width: 100vw;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 40rpx;

		display: flex;
		flex-direction: column;
		align-items: center;

		.card {
			margin-bottom: 40rpx;
			width: 100%;
			height: 300rpx;
			background-color: #fff;
			border-radius: 20rpx;
			color: #3e3e3e;
			box-sizing: border-box;
			box-shadow:10rpx 12rpx 12rpx 8rpx #eec324;
			background: url("@/static/image/预约bg.png") no-repeat;
			padding: 20rpx;

			.avatar {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.info {
				display: flex;
				justify-content: space-between;

				.item {
					margin: 20rpx auto;
					display: flex;

					// flex-direction: column;
					.pre-book {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 120rpx;
						height: 50rpx;

						border-radius: 40rpx;
						color: #fff;
					}

					.already {
						background-color: #54e83a;
					}

					.visit {
						background-color: #0485e8;
					}

					.error {
						width: 180rpx;
						background-color: #e84828;
					}

					.expire {
						background-color: #e83a3d;
					}

					.over {
						width: 180rpx;
						background-color: #685de8;
					}
				}

			}

			.titleDate {
				font-size: 32rpx;
				font-weight: bold;
				// color: #eec324;
			}
		}
	}

</style>
